<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .son{
        background-color: lightgreen;
    }
    .parent{
        background-color:lightpink;
    }
    </style>
</head>
<div id="app">
    <son @func="show"></son>
    <div class="parent">{{name}}<span v-if='dataFormSon.name'>有一个儿子叫{{dataFormSon.name}}，今年{{dataFormSon.age}}岁了</span></div>
</div>
<template id="tmpl">
    <div class="son">
      <h3>子组件</h3>
      <input type="button" value="找父亲" @click="myclick">
    </div>
  </template>
<body>
    <script src="./js/vue.js"></script>
    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                name: '郭靖',
                dataFormSon: {}
            },
            methods: {
                show(data) {
                    this.dataFormSon = data
                }
            },
            components: {
                son: {
                    template: '#tmpl', //通过指定了一个Id, 表示要去加载这个指定Id的 template 元素中的内容当作组件的HTML结构
                    data() {
                        return {
                            sonmsg: { name: '郭破虏', age: 6 }
                        }
                    },
                    methods: {
                        myclick() {
                            // 当点击子组件的按钮的时候，通过$emit拿到父组件传递过来的 func 方法，并调用这个方法
                            // emit 英文原意： 是触发，调用、发射的意思
                            this.$emit('func', this.sonmsg)
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>